import React, { Component } from 'react';
import Tabbar from './Tabbar'
import styled from 'styled-components'


const TabContainer = styled.div`

li {
  display: inline-block;
  line-height:35px;
}

.active {
  font-size:30px;
  background:blue;
  color:white;
  width:150px;
}

`


class Movie extends Component {
  state = {
    current: 1,
    tablist: [{ id: 1, name: "电影" }, { id: 2, name: "影院" }, { id: 3, name: "我的" }]
  }

  handleChange = (id) => {
    this.setState({
      current: id
    })
  }

  render() {
    return (
      <TabContainer>
        <Tabbar current={this.state.current} list={this.state.tablist} change={this.handleChange}></Tabbar>
      </TabContainer>
    );
  }
}

export default Movie;